<template>
  <div class="banner">
    <el-carousel trigger="click" height="713px">
      <el-carousel-item v-for="banner in banner_list">
        <a :href="banner.link"><img width="100%" :src="banner.image" alt=""></a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  export default {
    name: "Banner",
    data() {
      return {
        banner_list: [
          // {link:"http://www.baidu.com",img:"/static/banner/1.png"},
          // {link:"http://www.baidu.com",img:"/static/banner/2.png"},
          // {link:"http://www.baidu.com",img:"/static/banner/3.png"},
        ]
      };
    },
    created: function () {
      this.$axios.get(this.$settings.Host + '/banner/').then(response => {
        this.banner_list = response.data
      }).catch(error => {
        console.log(error.response);
      })
    }
  }
</script>

<style>
  .el-carousel__arrow {
    width: 100px !important;
    height: 100px !important;
  }

  .el-icon-arrow-left {
    font-size: 35px;
    margin-left: 0px;
  }

  .el-icon-arrow-right {
    font-size: 35px;
    margin-right: 0px;
  }


  /*.el-carousel__arrow--left {*/
  /*  left: -50px;*/
  /*}*/

  /*.el-carousel__arrow--right {*/
  /*  right: -50px;*/
  /*}*/


</style>
